<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="../templates/principal.xhtml">

    <ui:define name="content" id="content">
        <h1 class="title ui-widget-header ui-corner-all">Bem Vindo a Movimentação do Livro</h1>

        <h:form id="frmLivro">


            <p:dataTable id="tabLivro" widgetVar="wtabLivro" var="livro" value="#{livroBean.lazyModel}" paginator="true" rows="12" lazy="true"
                         emptyMessage="Nenhum Registro Retornado ..."
                         selection="#{livroBean.selectedLivro}" selectionMode="single"
                         onRowSelectComplete="livroDialog.show()" onRowSelectUpdate="display">

                <f:facet name="header">
                    Selecione uma linha e clique para Manutenção
                    <p:commandButton value="Abertura" update="tabLivro" action="#{livroBean.novo}" oncomplete="livroDialog.show()" 
                                     image="ui-icon ui-icon-folder-open" title="Clique para Inserir um Novo Livro" />
                </f:facet>

                <p:column headerText="Numero" sortBy="#{livro.numLivro}" filterBy="#{livro.numLivro}">
                    <h:outputText value="#{livro.numLivro}" />
                </p:column>

                <p:column headerText="Data Abertura" filterBy="#{livro.datAbertura}" sortBy="#{livro.datAbertura}" style="text-align: center;">
                    <h:outputText value="#{livro.datAbertura}">
                        <f:convertDateTime type="date" dateStyle="short" pattern="dd/MM/yyyy"/>
                    </h:outputText>
                </p:column>

                <p:column headerText="Data Fechamento" filterBy="#{livro.datFechamento}" sortBy="#{livro.datFechamento}" style="text-align: center;">
                    <h:outputText value="#{livro.datFechamento}">
                        <f:convertDateTime type="date" dateStyle="short" pattern="dd/MM/yyyy"/>
                    </h:outputText>
                </p:column>
            </p:dataTable>

            <p:dialog id="dialog" header="Detalhes Livro" widgetVar="livroDialog" resizable="true"
                      width="600" showEffect="explode" hideEffect="explode">

                <h:panelGrid id="display" columns="2" style="margin-bottom:50px" cellpadding="5">
                    <h:outputText value="Numero:" />
                    <p:inputText id="inNumero" value="#{livroBean.selectedLivro.numLivro}" 
                                 onkeyup="javascript:maskIt(this,event,'#####',true)" style="width:100px; font-weight:bold" />

                    <h:outputText value="Data Abertura:" />
                    <p:calendar id="inDatAbertura" locale="pt" value="#{livroBean.selectedLivro.datAbertura}" pattern="dd/MM/yyyy" />

                    <h:outputText value="Data Fechamento:" />
                    <p:calendar id="inDatFechamento" value="#{livroBean.selectedLivro.datFechamento}" pattern="dd/MM/yyyy" />
                </h:panelGrid>
                <p:outputPanel rendered="#{loginBean.disableButton}">
                    <p:commandButton value="Gravar" update="messages,tabLivro,display"
                                     actionListener="#{livroBean.inserir}" oncomplete="livroDialog.hide()" />
                    <p:commandButton value="Alterar" update="messages,tabLivro,display"
                                     actionListener="#{livroBean.alterar}" oncomplete="livroDialog.hide()" />
                    <p:commandButton id="btExcluir" value="Excluir" onclick="confirmation.show()" type="button" />
                </p:outputPanel>
            </p:dialog>

            <p:confirmDialog message="Confirma a Exclusão desse Livro?"
                             showEffect="bounce" hideEffect="explode"
                             header="Exclusão do Livro" severity="alert" widgetVar="confirmation">

                <p:commandButton value="Sim" update="messages,tabLivro,display" oncomplete="confirmation.hide(),livroDialog.hide()"
                                 actionListener="#{livroBean.excluir}" />
                <p:commandButton value="Não" onclick="confirmation.hide()" type="button" />

            </p:confirmDialog>

        </h:form>
    </ui:define>
</ui:composition>